<template>
  <div class="querySearch-box">
    <el-row :gutter="20">
      <el-col :span="item.span" v-for="(item, index) in formConfigurationItem" :key="index">
        <!-- 普通输入框 -->
        <div class="mb10" v-if="item.type == 'input'">
          <el-input v-model="formData[item.value]" :placeholder="'请输入' + item.placeholder" clearable></el-input>
        </div>

        <!-- 普通下拉选 -->
        <div class="mb10" v-if="item.type == 'select'">
          <el-select
            style="width: 100%"
            v-model="formData[item.value]"
            :placeholder="'请选择' + item.placeholder"
            :clearable="item.clearable == false ? item.clearable : true"
            @change="changeselect($event, item)"
            :multiple="item.multiple ? item.multiple : false"
          >
            <el-option
              v-for="(o, p) in item.options"
              :key="p"
              :label="item.optionsConfig && item.optionsConfig.label ? o[item.optionsConfig.label] : o.label"
              :value="item.optionsConfig && item.optionsConfig.value ? o[item.optionsConfig.value] : o.value"
            ></el-option>
          </el-select>
        </div>

        <!-- 选择任意一级选项 级联选择器 -->
        <div class="mb10" v-if="item.type == 'cascader'">
          <el-cascader
            style="width: 100%"
            v-model="formData[item.value]"
            :options="item.options"
            :props="{ checkStrictly: true, emitPath: false, ...item.props }"
            clearable
          ></el-cascader>
        </div>

        <!-- 日期时间选择器 -->
        <div class="mb10" v-if="item.type == 'datetimerange'">
          <el-date-picker
            style="width: 100%"
            v-model="formData[item.value]"
            :type="item.type"
            align="right"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            @change="changedatetimerange"
          ></el-date-picker>
        </div>

        <!-- 按钮 -->
        <div class="mb10" v-if="item.type == 'btn'">
          <slot name="btn" :data="formData"></slot>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    formConfigurationItem: {
      type: Array,
      default: true
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          // 禁用今天之后的时间（不包括今天）
          return time.getTime() > Date.now();
        }
      },

      formData: {} // 保留对象
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //处理时间选择
    changedatetimerange(e) {
      if (e) {
      }
    },

    //清空数据所有数据
    clearData() {
      this.formData = {};
    },

    //定点清除
    clearOne(val) {
      this.$set(this.formData, val, '');
    },

    //普通下拉选
    changeselect(e, it) {
      console.log(e);
      console.log(it);
      let myData = {
        value: e,
        item: it
      };
      this.$emit('changeptselect', myData);
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
.querySearch-box {
  width: 100%;

  .mb10 {
    margin-bottom: 10px;
  }
}
</style>
